<template>
  <van-skeleton title :row="3" v-show="loading"/>
  <content ref="contentRef" @submit="debouncedSubmit" v-show="!loading">
    <van-button  type="primary" native-type="submit" @click="debouncedSubmit" class="btn">
      提交
    </van-button>
    <van-button  type="danger" native-type="submit" @click="handleDelete" style="margin-left: 20px;" class="btn">
      删除
    </van-button>
  </content>
</template>
<script setup lang="ts" name="Detail">
import Content from "./Content.vue";
import {useRoute, useRouter} from "vue-router";
import tree from  "../../api/tree.ts"
import {debounce} from "../../utils";
import {ref} from "vue";
const route = useRoute();
const router = useRouter();
const groupId = route.query.groupId as string;
const id = route.query.id;
const contentRef = ref<any>(null)
function reload(){
  tree.queryById(id).then((res:any)=>{
    loading.value = false;
    contentRef.value?.setProps({values:res})
  })
}
reload()
const loading = ref(true)
function handleSubmit(){
  const data = contentRef.value.getValue()
  tree.update({...data,id,groupId}).then((res:any)=>{
    router.push({path:'/tree',query:{groupId}})
  })
}
const debouncedSubmit = debounce(handleSubmit, 1000);
function handleDelete(){
  tree.deleteById(id).then(()=>{
    router.push({path:'/tree',query:{groupId}})
  })

}
</script>
<style>
.btn{
  width:100px;
  height: 30px;
}
</style>